<template>
  <div class="order-waiting">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><i class=" xq-icon icon-beizhu"></i>备注：</span><span class="content">{{content}}</span><span v-if="content==''" class="no-content">暂无</span>
        <el-button @click="confirmOrder" size="small" style="float: right; margin-top: 6px" type="success" icon="el-icon-success">我要接单</el-button>
        <el-button @click="cancelOrder" size="small" style="float: right;margin:6px 10px 0 0" type="danger" icon="el-icon-error">取消订单</el-button>
      </div>
      <div class="order-dish-item">
        <p><i class="xq-icon icon-msnui-time-bold"></i>下单时间: 2018年7月15日10:52:52</p>
        <p><i class="xq-icon icon-chongzhidingdanhao"></i>订单号: 1531634232598</p>
        <p style="color: #909399;">商品列表</p>
        <el-table
          :data="tableData"
          :show-summary="true"
          :summary-method="getSummaries"
         >
          <el-table-column
            prop="dishName"
            label="菜品名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="num"
            label="数量"
            width="100">
          </el-table-column>
          <el-table-column
            prop="price"
            width="100"
            label="单价">
          </el-table-column>
        </el-table>
        <div class="deliver-info">
          <div class="customerInfo">
            <p class="customerName"><i class="xq-icon icon-lvzhou_gukehuizong"></i>顾客: 王先生</p>
            <p><i class="xq-icon icon-shouji1"></i>联系电话: 13800138000</p>
            <p><i class=" xq-icon icon-dizhi01"></i>送货地址: 仲恺农业工程学院7栋宿舍门口</p>
            <p><i class=" xq-icon icon-daodashijian"></i>要求送达时间: 尽快送达</p>
          </div>
          <div class="delivermanInfo">
            <p class="deliverymanName"><i class=" xq-icon icon-peisong"></i>配送员: 刘女士</p>
            <p><i class=" xq-icon icon-shouji"></i>联系电话: 13800138000</p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderWaiting',
  data () {
    return {
      content: '',
      tableData: [{
        dishName: '鸡蛋炒河粉',
        num: '2',
        price: '6.00'
      }],
      num: []
    }
  },
  methods: {
    getSummaries (param) {
      const {columns, data} = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        // console.log(values)
        if (this.num.length === 0) {
          this.num = values
        }
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              if (this.tableData.length === 1) {
                return prev + curr
              }
              return prev + curr * this.num[index]
            } else {
              return prev
            }
          }, 0)
          if (index === 2) {
            sums[index] += ' 元'
          } else {
            sums[index] += ' 件'
          }
        }
      })

      return sums
    },
    confirmOrder () {
      this.$confirm('你要接单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '你已接单!'
        })
      })
    },
    cancelOrder () {
      this.$prompt('请输入取消原因', '取消订单提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '订单取消成功！'
        })
      })
    }
  }
}
</script>
<style lang="stylus">
  .order-waiting
    .el-card__header
      padding: 8px 20px
    .el-card__body
      padding 8px 20px
      min-height 240px
      .el-table::before
        width: auto
</style>
<style lang="stylus" scoped>
  @import "../../assets/css/base.styl"
  .order-waiting
    width: $width
    margin: 0 auto
    i
      font-size 16px
      margin-right 8px
    .box-card
      line-height: 40px
      margin-left 170px
      margin-bottom 12px
      .no-content
        color: #909399
      span
        font-size 14px
    .order-dish-item
      position: relative
      p
        line-height: 32px
        font-size: 14px
      .deliver-info
        position: absolute
        right: 0
        top: 0
        max-width 390px
        .customerInfo
          background-color: #409EFF
          color: #ffffff
          padding 0 15px
          margin-bottom 10px
          border-radius: 6px
        .delivermanInfo
          background-color: #E6A23C
          color: #ffffff
          padding 0 15px
          border-radius: 6px
</style>
